<template>
  <div id="hex-map">
  </div>  
</template>

<script>
import { Hexbin } from '@antv/l7plot';
import AreaList from './area-list.json';
export default {
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      new Hexbin('hex-map', {
        map: {
          type: 'mapbox',
          style: 'dark',
          pitch: 43,
          center: [120.13383079335335, 29.9],
          zoom: 8.2,
        },
        source: {
          data: AreaList,
          parser: {
            type: 'json',
            x: 'lng',
            y: 'lat',
          },
          aggregation: {
            field: 'v',
            radius: 2500,
            method: 'sum',
          },
        },
        shape: 'hexagonColumn',
        size: {
          field: 'sum',
          value: ({ sum }) => {
            return sum * 200;
          },
        },
        color: {
          field: 'sum',
          value: [
            '#094D4A',
            '#146968',
            '#1D7F7E',
            '#289899',
            '#34B6B7',
            '#4AC5AF',
            '#5FD3A6',
            '#7BE39E',
            '#A1EDB8',
            '#C3F9CC',
            '#DEFAC0',
            '#ECFFB1',
          ],
        },
        style: {
          coverage: 0.8,
          angle: 0,
          opacity: 1.0,
        },
      })
    }
  },
}
</script>

<style>
  #hex-map {
    height: 400px;
  }
</style>